class details{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.shop = document.querySelector(".shop");

        // 1. 读取本地存储中的数据
        this.getLocal();
        // 2. 读取后端的商品数据
        this.load();
        // 4. 添加事件
        // this.addEvent();
    }
    // addEvent(){
    //     const that = this;
    //     this.tbody.addEventListener("input",function(eve){
    //         const e = eve || window.event;
    //         const target = e.target || e.srcElement;
    //         if(target.className === "setNum"){
    //             // 获取id
    //             that.id = target.parentNode.parentNode.getAttribute("index");
    //             // 获取数量
    //             that.num = target.value-0;
    //             // 5. 根据获取到的数量，修改本地数据
    //             that.setLocal(function(i){
    //                 that.goods[i].num = that.num;
    //             });
    //         }
    //     })

    // }
    // setLocal(cb){
    //     // 遍历，找到要操作的数据
    //     let i = 0;
    //     this.goods.some((val,idx)=>{
    //         i = idx;
    //         return val.id === this.id;
    //     })
    //     // 执行外部传入的操作功能，同时将遍历到的要操作的数据的索引，传回去
    //     cb(i);
    //     // 再将操作之后的数据，存回本地存储
    //     localStorage.setItem("goods", JSON.stringify(this.goods));
    // }
    getLocal(){
        // 读本地数据
        this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
        // console.log(this.goods)
    }
    load(){
        // 开启ajax读后端数据
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                this.res = JSON.parse(res);
                // console.log(this.res);
                // 3. 渲染页面
                this.render();
            }
        })
    }
    render(){
        console.log(this.res)
        console.log(this.goods)
        let str = "";
        // 遍历后端数据
        this.res.forEach(val1=>{
            // 遍历本地数据
            this.goods.forEach(val2=>{
                // 比对id
                if(val1.index === val2.id){
                    console.log(val1);
                    // 拼接页面结构
                    str+=`
                    <div class="glass">
                    <div class="cont glass_left">
                        <div class="small_box">
                            <img src="${val1.img1}" alt="">
                            <span></span>
                            <em></em>
                        </div>
                        <ul>
                            <a href="" id="il"><img src="./images/left.jpg" alt="" ></a>
                            <li><img src="${val1.img1}" alt=""></li>
                            <li><img src="${val1.img1}" alt=""></li>
                            <li><img src="${val1.img1}" alt=""></li>
                            <a href="" id="ir"><img src="./images/right.jpg" alt=""></a>
                        </ul>
                    </div>
                    <div class="big_box">
                        <img src="${val1.img1}" alt="">
                    </div>
            
        
            
                    <div class="glass_right">
                        <h2>24期免息【 当天发货 】一加9 Pro 5G手机新款一加9游戏手机官方旗舰店正品 高通骁龙870 新品一加9Pro</h2>
                        <p>当天发货 24期免息 送影视会员</p>
                        <div class="price">
                            <img src="./images/details/1.png" alt="" class="bg1">
                            <img src="./images/details/2.png" alt="" class="bg2">
                            <span class="huodong">此商品在活动中，亲尽快购买</span>
                            <div class="money">
                                <span class="span1">价格</span>
                                <span class="span2">￥</span>
                                <span class="span3">2199.00~4399.00</span>
                            </div>
                        </div>
            
                        <div class="select">
            
                            <div id="wrap">
                                <div id="top">
                                    <p id='model'>
                                        <font>套餐类型</font>
                                        <span>官方标配</span>
                                        <span>套餐一</span>
                                        <span>套餐二</span>
                                        <span>套餐三</span>
                                        <span>套餐四</span>
                                    </p>
                                    <p id='color'>
                                        <font>机身颜色</font>
                                        <span>蓝屿</span>
                                        <span>黑岛</span>
                                        <span>深空灰色</span>
                                    </p>
                                    <p id='rom'>
                                        <font>储存容量</font>
                                        <span>8+128GB</span>
                                        <span>8+256GB</span>
                                        <span>12+256GB</span>
                                    </p>
                                    <p id='banben'>
                                        <font>版本类型</font>
                                        <span>公开版</span>
                                        <span>移动赠费版</span>
                                        <span>联通合约版</span>
                                    </p>
                                </div>
                                <div id="bottom">
                                    <p>价格： <font>￥ <span id='price'>2199</span>.00</font> <a href=''><i>移动赠费版</i>或<i>联通合约版</i>购机价格计算请点击这里>.< </a></p>
                                    <button class="btn1">加入购物车</button>
                                    <button class="btn2">立即购买</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    `
                }
            })
        })
    //     // 将拼接好的页面结构，填充到页面
        this.shop.innerHTML = str;
    }
}

new details();